<template>
  <div class="time-range">
    <div class="time-range-picker" :class="{ disabled: config.disabled,'time-range-picker-focused': isFocus }">
      <div class="clock" v-if="config.hasIcon">
        <img src="@/assets/icons/clock.svg" alt="" />
      </div>
      <div @focus="!config.disabled && focusDom()" tabindex="0" class="time-range-picker_input">
        <div class="start">
          <input type="text" readonly :disabled="config.disabled" :placeholder="placeholder[0]" v-model="startTime" />
        </div>
        <div class="separator">
          {{ separator || "~" }}
        </div>
        <div class="end">
          <input type="text" readonly :disabled="config.disabled" :placeholder="placeholder[1]" v-model="endTime" />
        </div>
      </div>
      <div class="close" v-if="config.allowClear">
        <img @click.stop="closeTime" src="@/assets/icons/close-circle-fill.svg" v-if="!config.disabled && (this.startTime || this.endTime)" alt="" />
      </div>
    </div>
    <TimeDialog :startTime="startTimeValue" :endTime="endTimeValue" :visible="visible" :popperStyle="popperStyle" :popperClass="popperClass" @confirm="confirm" :config="config" ref="timeDialog">
      <template v-if="$slots.footer">
        <div slot="footer">
          <slot name="footer"></slot>
        </div>
      </template>
    </TimeDialog>
  </div>
</template>

<script>
import TimeDialog from './dialog.vue'
export default {
  name: 'TimeRange',
  components: {
    TimeDialog
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    separator: {
      type: String,
      default: '~'
    },
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    valueFormat: {
      type: String,
      default: 'HH:mm:ss'
    },
    placeholder: {
      type: Array,
      default: () => {
        return ['开始时间', '结束时间']
      }
    },
    popperStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    popperClass: {
      type: String,
      default: null
    },
    configs: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      time: [],
      startTime: '',
      startTimeValue: '',
      endTime: '',
      endTimeValue: '',
      isFocus: false,
      visible: false
    }
  },
  watch: {
    value: {
      handler() {
        this.time = this.value
        this.handleValue()
      },
      deep: true
    }
  },
  computed: {
    config() {
      let config = {
        'use12-hours': false, // 12小时制
        disabledHours: [], // 禁选小时
        disabledMinutes: [], // 禁选分钟
        disabledSeconds: [], // 禁选秒钟
        hasHours: true, // 显示小时列
        hasMinutes: true, // 显示分钟列
        hasSeconds: true, // 显示秒钟列
        hoursStep: 1, // 小时步长
        minutesStep: 1, // 分钟步长
        secondsStep: 1, // 秒钟步长
        allowClear: true, // 可清除
        hasIcon: true, // 图标
        showNow: true, // 显示此刻
        disabled: false // 禁选
      }
      return this.$utils.formatProps(config, this.configs)
    }
  },
  mounted() {
    this.time = this.value
    this.handleValue()
  },

  methods: {
    // 初始化
    handleValue() {
      if (this.time.length) {
        this.formatTime('startTime', this.time[0], this.format)
        this.formatTime('startTimeValue', this.time[0], this.valueFormat)
        this.formatTime('endTime', this.time[1], this.format)
        this.formatTime('endTimeValue', this.time[1], this.valueFormat)
      } else {
        this.reset()
      }
    },
    // 关闭
    hide() {
      this.visible = false
      this.isFocus = false
    },
    // 清除
    closeTime() {
      this.reset()
      this.hide()
    },
    // 聚焦
    focusDom() {
      this.isFocus = true
      this.visible = true
    },
    // 确定
    confirm(start, end) {
      let startTime = start,
        endTime = end
      if (startTime && endTime) {
        if (!this.$moment(end).isSameOrAfter(start)) {
          startTime = end
          endTime = start
        }
        this.formatTime('startTime', startTime, this.format)
        this.formatTime('startTimeValue', startTime, this.valueFormat)
        this.formatTime('endTime', endTime, this.format)
        this.formatTime('endTimeValue', endTime, this.valueFormat)
        this.$emit('input', [this.startTimeValue, this.endTimeValue])
      } else {
        this.reset()
        this.$emit('input', [])
      }
    },
    reset() {
      this.startTime = ''
      this.startTimeValue = ''
      this.endTime = ''
      this.endTimeValue = ''
      this.time = []
    },
    // 格式化
    formatTime(name, value, format) {
      if (format) {
        this[name] = this.$moment(value, format).format(format)
      } else {
        this[name] = value
      }
    }
  }
}
</script>

<style lang="less" scoped>
.time-range {
  width: 300px;
  padding: 4px 0;
  display: inline-block;
  .time-range-picker {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    font-size: 14px;
    cursor: text;
    &_input {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 4px 11px;
      height: 32px;
      .start,
      .end {
        text-align: center;
        height: 100%;
        width: 100%;
        line-height: 1.5;
        input {
          border: 0;
          min-width: 1px;
          width: 100%;
          line-height: inherit;
          text-align: center;
          outline: 0;
          height: 99%;
          pointer-events: none;
          &:focus,
          &:focus-visible {
            box-shadow: none;
            border: 0;
            outline: 0;
          }
          &::placeholder {
            color: #bfbfbf;
          }
          &:disabled {
            background: transparent;
            cursor: not-allowed;
          }
        }
      }
      .separator {
        text-align: center;
        margin: 0 10px;
      }
    }
    &:not(.disabled):hover {
      box-shadow: none;
      border: #40a9ff solid 1px;
    }
    .clock,
    .close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      text-align: center;
      line-height: 1;
      img {
        width: inherit;
      }
    }
    .clock {
      left: 10px;
    }
    .close {
      right: 10px;
      opacity: 0;
    }
    &:hover {
      .close {
        cursor: pointer;
        opacity: 1;
      }
    }
  }
  .time-range-picker-focused {
    box-shadow: none;
    border: #40a9ff solid 1px;
  }
  .disabled {
    background: #f5f5f5;
    border-color: #d9d9d9;
    cursor: not-allowed;
    color: #00000040;
  }
}
</style>
